<template>
	<div id="registery">
		<com-head>注册</com-head>
		<div class="top"></div>
		<div class="posi">
			<div class="title">注册赢大奖</div>
      <div class="inp one">
				<input type="text" placeholder="请输入昵称：" v-model="nic">
			</div>
			<div class="inp ">
				<input type="text" placeholder="请输入手机号：" v-model="tel">
			</div>
			<div class="inp">
				<input type="password" placeholder="请输入密码：" v-model="password">
			</div>
      <div class="verityb">
				<input type="text" placeholder="请输入验证码：" v-on:keyup.enter="registry" v-model="verify">
        <button class="verify" @click="verification" :disabled='isSend' :class="{'send-sms' : isSend, 'no-send-sms': isSend}">{{btntxt}}</button>
			</div>
			<div class="btn">
				<button @click="registry">立即注册</button>
			</div>
			<div class="hasaccount">
        <span class="left">已有账号,</span><router-link to='login' tag="span"  class="right">去登陆</router-link>
      </div>
		</div>
	
	</div>
</template>

<script>
export default {
	name: 'registery',
	data () {
		return {
			id: this.$route.query.id,
			lay: this.$route.query.lay,
			checked:true,
      btntxt: '获取验证码',
      sendSMSTime: 0,
      isSend: false,
      nic: '',
			tel:'',
			phone: '13695623621',
      password: '',
      verify: ''
		};
	},
	mounted () {
  console.log(this.$route.query.id);
	},
	methods: {
		registry () {
      let regTel = /^(1[3-9])\d{9}$/;
			if (!this.verify){
        this.$bus.$emit('toast', '验证码不能为空');       
      } else if (!regTel.test(this.tel)) {
        this.$bus.$emit('toast', '手机号码不合法');
      } else  {
				this.axios.post('Reg/doreg',{
					name: this.nic,
					mobile: this.tel,
					code: this.verify,
					password: this.password,
				})
				.then((response)=>{
					if (response.data=='1'){
						this.$bus.$emit('toast', '注册成功');
						this.$router.push('login');
					}else if(response.data=='2'){
						this.$bus.$emit('toast', '用户名已被占用');	
					}else if(response.data=='3'){
						this.$bus.$emit('toast', '验证码错误');	
					}
				})
      }
    },
    verification () {
			if (!this.nic) {
        this.$bus.$emit('toast', '昵称不能为空');
      } else if (!this.tel){
        this.$bus.$emit('toast', '手机号不能为空');       
      } else if (!this.password){
        this.$bus.$emit('toast', '密码不能为空');       
      } else if (!/^.{6,20}$/.test(this.password)) {
        this.$bus.$emit('toast', '请输入6-20位登录密码');
      } else {
				this.axios.post('Reg/send_sms',{
					mobile: this.tel,
				})
				.then((response)=>{
					if (response.data=='1'){
						this.sendSMSTime = 60;
						this.isSend = true;
						this.disabled = true;
						this.btntxt = '已发送(' + this.sendSMSTime + ')s';
						this.timer();
					}else if(response.data=='2'){
						this.$bus.$emit('toast', '手机号已注册');	
						this.disabled = false;
					}
				})
			}			
    },
    timer () {
      if (this.sendSMSTime > 0) {
        this.sendSMSTime--;
        this.btntxt = `已发送(${this.sendSMSTime})s`;
        setTimeout(() => {
          this.timer();
        }, 1000);
      } else {
        this.sendSMSTime = 0;
        this.btntxt = '重新获取';
        this.isSend = false;
      }
    }
	}
};
</script>

<style lang="scss">
	#registery {
		padding-top: 67px;
		input {
			color: white;
		}
    input::-webkit-input-placeholder { /* WebKit browsers */  
					color: white; 
					font-size:24px;
					} 
					input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
					color: white; 
					font-size:24px;
					} 
					input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
					color: white; 
					font-size:24px;
					} 
					input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
					color: white; 
					font-size:24px;
					} 
		.top {
			height: 502px;
			background: url('../assets/images/login.png');
			background-size: 100% 100%; 
			width: 100%;
		}
		.posi {
			position: absolute;
			width: 100%;
			top: 566px;
			left: 0;
			right: 0;
			bottom: 0;
			background: #e69414;
			background:linear-gradient(left top, #e69414, #e69414);
			.title {
				height: 82px;
				line-height: 82px;
				text-align: center;
				color:rgba(255,255,255,1);
				color: white;
				margin-bottom: 20px;
			}
			.inp {
				margin: 0 50px;
				background: #ee4646;
				height: 62px;
				border-radius:10px;
				margin-bottom: 30px;
				
					input {
						width: 100%;
						height: 100%;
						background: transparent;
						font-size: 24px;
						padding-left: 32px;
					}
			}
			.btn {
				margin: 0 50px;
				text-align: center;
				button {
					width: 100%;
					height:62px;
					background: #f5c632;
					border-radius:10px;
					color: white;
					font-size: 24px;
					margin-top: 70px;
				}
			}
      .verityb {
				margin: 0 50px;
        display: flex;
        justify-content: space-between;
        input {
          width:361px;
          height:62px;
          background:#ee4646;
          border-radius:10px;
          font-size: 24px;
						padding-left: 32px;
            box-sizing: border-box;
        }
        button {
          width:226px;
          height:62px;
          background:rgba(237,70,70,1);
          border-radius:10px;
          color: white;
        }
      }
			.bootm {
				margin: 0 50px;
				color: white;
				font-size:21px; 
				margin-top: 50px;
				display: flex;
				justify-content: space-between;
			}
      .hasaccount {
        text-align: center;
        margin-top: 20px;
				padding-bottom: 150px; 
        color: white;
        .left {
          font-size: 21px;
          color: #ECECEC;
        }
        .right {
          font-weight: 700;
          font-size: 23px;
        }
      }
		}
	}
</style>
